Create monorepo and typeScript react base project by handreyrc · Pull Request #36 · serverlessworkflow/editor

handreyrc · 2026-03-12T14:08:53Z

Closes #8
Closes #14

This PR aims to:

Setup the monorepo to host Serverless Workflow Visual Editor components
Setup ts / react base project / package for the development of the diagram-editor component.
It shall be possible to build repo packages in dev / prod mode
It shall be possible to run storybook in dev mode and then test / debug "DiagramEditor" sample component

Copilot

Pull request overview

This PR bootstraps a pnpm-based monorepo for the Serverless Workflow Visual Editor, adding a shared ESLint/Prettier setup and an initial TypeScript + React package (serverless-workflow-diagram-editor) with Storybook, placeholder UI, and basic test scaffolding.

Changes:

Add monorepo workspace configuration, shared TypeScript configs, and root-level tooling (ESLint/Prettier/pnpm).
Introduce a shared @serverless-workflow-settings/eslint-config package and apply it at the repo root and in the diagram editor package.
Create the serverless-workflow-diagram-editor package with Storybook stories/assets and an initial PatternFly-based DiagramEditor placeholder component.

Reviewed changes

Copilot reviewed 37 out of 58 changed files in this pull request and generated 12 comments.

Show a summary per file

File	Description
tsconfig.test.json	Adds a dedicated tsconfig for tests (jest/testing-library types, noEmit).
tsconfig.base.json	Introduces shared TS compiler defaults for packages.
pnpm-workspace.yaml	Defines workspace packages and build dependency allowlist.
packages/serverless-workflow-diagram-editor/tsconfig.json	Package TS build config (src → dist).
packages/serverless-workflow-diagram-editor/tests/setupTests.ts	Jest DOM setup entry for tests.
packages/serverless-workflow-diagram-editor/tests/react-flow/Sample.test.tsx	Adds placeholder test file for react-flow area.
packages/serverless-workflow-diagram-editor/tests/core/sample.test.ts	Adds placeholder test file for core area.
packages/serverless-workflow-diagram-editor/stories/page.css	Storybook example styles for Page.
packages/serverless-workflow-diagram-editor/stories/header.css	Storybook example styles for Header.
packages/serverless-workflow-diagram-editor/stories/button.css	Storybook example styles for Button.
packages/serverless-workflow-diagram-editor/stories/assets/youtube.svg	Adds Storybook example asset.
packages/serverless-workflow-diagram-editor/stories/assets/tutorials.svg	Adds Storybook example asset.
packages/serverless-workflow-diagram-editor/stories/assets/styling.png	Adds Storybook example asset.
packages/serverless-workflow-diagram-editor/stories/assets/share.png	Adds Storybook example asset.
packages/serverless-workflow-diagram-editor/stories/assets/github.svg	Adds Storybook example asset.
packages/serverless-workflow-diagram-editor/stories/assets/docs.png	Adds Storybook example asset.
packages/serverless-workflow-diagram-editor/stories/assets/discord.svg	Adds Storybook example asset.
packages/serverless-workflow-diagram-editor/stories/assets/context.png	Adds Storybook example asset.
packages/serverless-workflow-diagram-editor/stories/assets/avif-test-image.avif	Adds Storybook asset used for media handling examples.
packages/serverless-workflow-diagram-editor/stories/assets/assets.png	Adds Storybook example asset.
packages/serverless-workflow-diagram-editor/stories/assets/accessibility.svg	Adds Storybook example asset.
packages/serverless-workflow-diagram-editor/stories/Page.tsx	Adds Storybook example Page component.
packages/serverless-workflow-diagram-editor/stories/Page.stories.ts	Adds Storybook stories + interaction test for Page.
packages/serverless-workflow-diagram-editor/stories/Header.tsx	Adds Storybook example Header component.
packages/serverless-workflow-diagram-editor/stories/Header.stories.ts	Adds Storybook stories for Header.
packages/serverless-workflow-diagram-editor/stories/DiagramEditor.tsx	Adds Storybook wrapper around the package’s DiagramEditor component.
packages/serverless-workflow-diagram-editor/stories/DiagramEditor.stories.ts	Adds the initial DiagramEditor story.
packages/serverless-workflow-diagram-editor/stories/Configure.mdx	Adds Storybook configuration/learning MDX page and related UI.
packages/serverless-workflow-diagram-editor/stories/Button.tsx	Adds Storybook example Button component.
packages/serverless-workflow-diagram-editor/stories/Button.stories.ts	Adds Storybook stories for Button.
packages/serverless-workflow-diagram-editor/src/react-flow/README.md	Adds placeholder docs for the react-flow sub-area.
packages/serverless-workflow-diagram-editor/src/index.ts	Adds package export barrel.
packages/serverless-workflow-diagram-editor/src/diagram-editor/index.ts	Adds diagram-editor export barrel.
packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx	Adds initial DiagramEditor placeholder implementation using PatternFly components.
packages/serverless-workflow-diagram-editor/src/core/README.md	Adds placeholder docs for core sub-area.
packages/serverless-workflow-diagram-editor/package.json	Adds package scripts (build/test/storybook), deps/devDeps.
packages/serverless-workflow-diagram-editor/eslint.config.js	Applies shared ESLint flat config to the package.
packages/serverless-workflow-diagram-editor/README.md	Adds package-level build/run instructions.
packages/serverless-workflow-diagram-editor/.storybook/preview.ts	Adds Storybook preview configuration (controls matchers).
packages/serverless-workflow-diagram-editor/.storybook/main.ts	Adds Storybook main config (addons, stories glob, telemetry off).
packages/eslint-config/package.json	Adds a shared ESLint config package definition.
packages/eslint-config/index.js	Implements shared ESLint flat config (TS/React/Prettier/hooks + ignores).
package.json	Adds root scripts and pins engines/pnpm for the monorepo.
eslint.config.js	Applies shared ESLint flat config at repo root.
README.md	Adds monorepo prerequisites and build instructions.
LICENSE	Fixes formatting/line-numbering at file end.
GOVERNANCE.md	Fixes formatting/line-numbering at file end.
CONTRIBUTING.md	Updates build instructions to pnpm and updates new-package script naming.
CODE_OF_CONDUCT.md	Fixes formatting/line-numbering at file end.
.prettierrc	Adds Prettier configuration.
.npmrc	Adds npm config to ignore workspace root check.
.gitignore	Adds/extends ignore patterns for node/dist/storybook artifacts and IDE files.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

CONTRIBUTING.md

packages/serverless-workflow-diagram-editor/README.md

packages/serverless-workflow-diagram-editor/package.json

packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx

packages/serverless-workflow-diagram-editor/package.json

packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx

packages/serverless-workflow-diagram-editor/stories/DiagramEditor.tsx

packages/serverless-workflow-diagram-editor/stories/Configure.mdx

README.md

Copilot

Pull request overview

Copilot reviewed 38 out of 59 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/serverless-workflow-diagram-editor/stories/Configure.mdx

packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx

Copilot

Pull request overview

Copilot reviewed 41 out of 62 changed files in this pull request and generated 6 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/serverless-workflow-diagram-editor/package.json

README.md

packages/serverless-workflow-diagram-editor/tsconfig.json

packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.test.tsx

packages/serverless-workflow-diagram-editor/jest.config.ts

handreyrc · 2026-03-13T08:33:28Z

@fantonangeli , @lornakelly , @ricardozanini @JBBianchi;

This PR is good enough for human review!

Thanks!

Copilot

Pull request overview

Copilot reviewed 43 out of 64 changed files in this pull request and generated 5 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

.rat-excludes

packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.test.tsx

README.md

packages/serverless-workflow-diagram-editor/README.md

CONTRIBUTING.md

Copilot

Pull request overview

Copilot reviewed 43 out of 64 changed files in this pull request and generated 6 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/serverless-workflow-diagram-editor/stories/DiagramEditor.tsx

packages/serverless-workflow-diagram-editor/jest.config.ts

packages/eslint-config/package.json

packages/serverless-workflow-diagram-editor/package.json

packages/serverless-workflow-diagram-editor/eslint.config.js

packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.test.tsx

Copilot

Pull request overview

Copilot reviewed 43 out of 64 changed files in this pull request and generated 4 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/serverless-workflow-diagram-editor/package.json

packages/eslint-config/package.json

README.md

packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.test.tsx

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com> Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com> Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com> Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Signed-off-by: Fabrizio Antonangeli fabrizio.antonangeli@gmail.com Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com> Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com> Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

lornakelly · 2026-03-24T08:53:58Z

package.json

    "husky": "catalog:",
    "lint-staged": "catalog:",
    "oxfmt": "catalog:",
+    "syncpack": "catalog:",


Not sure we need syncpack right now? Considering its a new, small repo and that we now have pnpm catalogs I think we could leave syncpack out and add it in the future if we really see a need?

Considering pnpm catalogs gives us shared versions for the repo I think it will be much easier to manage, what do you think?

I agree catalogs are a great default and probably enough for now.

The only concern I have is that they don’t enforce usage. Someone could still accidentally install a different version instead of using "catalog:", especially as we add more packages.

That’s where syncpack could help as a lightweight safety net (e.g. catching mismatches in CI).

That said, I’m also fine keeping things simple for now and adding it later if we start seeing that kind of drift, I just wanted to call out the tradeoff.

@JBBianchi, @lornakelly,

It wasn't added in this PR, I only updated the settings to match the catalog approach.
#44

To not mix things, I recommend removing it in other PR if that's the case.

Im happy to leave in, im new to pnpm catalogs (very nice by the way) but its good to stay safe based on above. Thanks for the input!

@handreyrc @JBBianchi @lornakelly
Sorry for the late reply, but I think it is worth explaining why I introduced Syncpack and what advantages it brings:

We can configure and enforce dependency policies. See: https://github.com/serverlessworkflow/editor/blob/main/.syncpackrc.json

pnpm catalogs don't check and enforce the use of catalogs

It enforces the use of workspace:* between monorepo packages, like I did here:

editor/.syncpackrc.json

Line 8 in c57b6c3

"pinVersion": "workspace:*"

This avoids accidentally using a pinned version from npm registry instead

It can explicitly target and enforce rules on peerDependencies, also configured here.

Show custom validation messages, which are useful for new contributors

Having two different versions of the same dependency across two packages, even if they differ only by a patch version, can lead to strange behaviour and can be difficult to debug. I remember this happened to the team and me before in another pnpm monorepo.

On the other hand, this does not increase the bundle size, and it is a very quick check in CI.

Please feel free to share your viewpoint on these points.

Thanks for the additional info Fabrizio!

handreyrc requested review from Copilot, fantonangeli and ricardozanini and removed request for Copilot March 12, 2026 14:08

Copilot started reviewing on behalf of handreyrc March 12, 2026 14:09 View session

handreyrc requested review from JBBianchi, Copilot and lornakelly March 12, 2026 14:09

Copilot started reviewing on behalf of handreyrc March 12, 2026 14:35 View session

handreyrc force-pushed the monorepo-setup branch from 8a9c9fe to 02fcc14 Compare March 12, 2026 14:40

Copilot AI reviewed Mar 12, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings March 12, 2026 15:06

Copilot started reviewing on behalf of handreyrc March 12, 2026 15:07 View session

Copilot AI reviewed Mar 12, 2026

View reviewed changes

handreyrc force-pushed the monorepo-setup branch from 26672a7 to 17e73b3 Compare March 12, 2026 15:15

Copilot AI review requested due to automatic review settings March 13, 2026 06:11

Copilot started reviewing on behalf of handreyrc March 13, 2026 06:11 View session

Copilot AI reviewed Mar 13, 2026

View reviewed changes

handreyrc force-pushed the monorepo-setup branch from 1e26a38 to f2082d3 Compare March 13, 2026 08:23

Copilot AI review requested due to automatic review settings March 13, 2026 08:29

Copilot started reviewing on behalf of handreyrc March 13, 2026 08:29 View session

Copilot AI reviewed Mar 13, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings March 13, 2026 08:41

Copilot started reviewing on behalf of handreyrc March 13, 2026 08:42 View session

Copilot AI reviewed Mar 13, 2026

View reviewed changes

handreyrc force-pushed the monorepo-setup branch from 15daf31 to d9ef232 Compare March 13, 2026 08:58

Copilot AI review requested due to automatic review settings March 13, 2026 09:23

Copilot started reviewing on behalf of handreyrc March 13, 2026 09:24 View session

Copilot AI reviewed Mar 13, 2026

View reviewed changes

fantonangeli and others added 26 commits March 23, 2026 18:10

Fixed error calling oxlint binary

7f73cb3

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com> Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Fixes comment: serverlessworkflow#36 (comment)

2cf3c6a

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com> Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Fixes comment: serverlessworkflow#36 (comment)

5425f39

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com> Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Remove babel and webdriveio dependency

e85b2e4

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Fix package version and name

406d8fc

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Remove redundant imports

6f57688

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Add exports to package.json

321414b

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Add exports to package.json

210ce40

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Fixes comment: serverlessworkflow#36 (comment)

aa6e562

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com> Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Fixes comment: serverlessworkflow#36 (comment)

cd606df

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com> Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Move emit tsconfig settings to package level

b2412e0

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Fix peer dependencies

4c50c14

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Fix exports

38137b3

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Refactored linter and formatter

c689b19

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com> Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Fixed lint-staged cmd

aee6ce6

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com> Signed-off-by: handreyrc <handrey.cunha@gmail.com>

last fixes

8f6da0e

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com> Signed-off-by: handreyrc <handrey.cunha@gmail.com>

fix package settings

ecb0b49

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Potential fix for pull request finding

7f34832

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Signed-off-by: Fabrizio Antonangeli fabrizio.antonangeli@gmail.com Signed-off-by: handreyrc <handrey.cunha@gmail.com>

2nd round

b615ca3

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com> Signed-off-by: handreyrc <handrey.cunha@gmail.com>

3rd round

8038953

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com> Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Fixes comment: serverlessworkflow#36 (comment)

972f68a

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com> Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Remove react import

27d1ce6

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Update rat-exclude list

3178886

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Remove linter package to use oxfmt & oxlint directly

ed75c88

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com> Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Forgot config files

b598631

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com> Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Rebase, catalog clean up, add syncpack to catalog

ac8cfb6

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

lornakelly reviewed Mar 24, 2026

View reviewed changes

JBBianchi approved these changes Mar 24, 2026

View reviewed changes

ricardozanini approved these changes Mar 24, 2026

View reviewed changes

handreyrc mentioned this pull request Mar 25, 2026

Setup Storybook #14

Closed

Conversation

handreyrc commented Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

handreyrc commented Mar 13, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lornakelly Mar 24, 2026

Choose a reason for hiding this comment

Uh oh!

JBBianchi Mar 24, 2026

Choose a reason for hiding this comment

Uh oh!

handreyrc Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lornakelly Mar 24, 2026

Choose a reason for hiding this comment

Uh oh!

fantonangeli Mar 24, 2026

Choose a reason for hiding this comment

handreyrc commented Mar 12, 2026 •

edited

Loading

handreyrc Mar 24, 2026 •

edited

Loading